|
VML (Vector Markup Language)
1. line
<v:line from="시작 x 좌표, 시작 y 좌표", to="끝점 x 좌표, 끝점 y 좌표", strokecolor="색" strokeweight="굵기">
</v:line>
속성접근
- line 아이디.속성
2. polyline (연결된 여러 개의 적선을 그릴때 사용)
<v:polyline points="x,y x1,y2, x3,y3 ....." strokecolor="" strokeweight="">
</v:polyline>
속성접근
- polyline 아이디.속성
- 단, points는 접근할 수 없다. 변경시 outerHTML 사용
3. rect (직, 정사각형)
<v:rect style="position:absolute; width; height; top; left;" fillcolor="색" strokecolor="" strokeweight="">
</v:rect>
속성접근
- rect 아이디.속성
- 단, width, height는 rect 아이디.style.pixelWidth 또는 rect 아이디.style.pixelHeight 접근
4. roundrect (모서리가 둥근 직사각형)
<v:roundrect style="position:absolute; width; height; top; left;" fillcolor="색" strokecolor="" strokeweight="" arcsize="__%">
</v:roundrect>
- arcsize : 모서리의 둥근 정도
속성접근
- roundrect 아이디.속성
- 단, arcsize는 접근 불가, 변경 시 outerHTML or innerHTML 사용
5. oval (타원, 원)
6. arc (원호)
<v:arc style="position:absolute; width; height; top; left;" fillcolor="색" strokecolor="" strokeweight="" fillcolor="색" startangle="" endangle="">
</v:arc>
7. curve (곡선)
<v:curve from="x,y" to="x,y" control1="제어1의 x,y" control2="제어2의 x,y" strokecolor="" strokeweight="" fillcolor="색" startangle="" endangle="">
</v:curve>
8. shape (자유로운 도형)
<v:shape style="position:absolute; width; height; top; left;" coordsize="x,y좌표" strokecolor="" strokeweight="" path=" m x,y l x1,y1, x2,y2, .... xe ">
</v:shape>
shape에서 style의 left, top은 무의미, width, height는 실제 그 모양의 크기가 아니라 coordsize 비율에 따른 크기
원하는 크기로 도형을 그리려면 width와 height 그리고 coordsize의 값을 동일하게 지정
- coordsize : 좌표 크기 지정
- path : 선이 그려지는 경로(좌표)
- path의 m : moveto
- path의 l : lineto
- path의 x : close
- path의 e : end
9. stroke (선모양 지정)
//대시 모양
<v:stroke dashstyle="_____________"/>
- solid
- dash
- dot
- dashdot
- longdash
- longdashdot
//선 모양
<v:stroke linestyle="_____________"/>
- single
- thinthin
- thinthick
- thickthin
//연결 모양
<v:stroke joinstyle="_____________"/>
- round
- beve1
- miter
//선의 끝부분 모양
<v:stroke endcap="_____________"/>
- flat
- round
//선 시작점 모양 and 선 끝점 모양
<v:stroke stratarrow = "________" endarrow="________" />
- diamond
- block
- classic
- oval
- open
//투명도
<v:stroke opacity = "0~1 사이의 숫자" />
//선에 이미지 채우는 방식
<v:stroke filltype="___________" src="__________" />
- tile
- pattern
- frame
10. fill (도형 내부 채우기)
<v:file type="________">
- gradient: angle(그라데이션 각도), color(그라데이션 첫 색상), color2(그라데이션 두번째 색상)
- gradientradial: color, color2
- tile: src(이미지로 채울 파일 경로)
- pattern: src, color, color2
- frame: src
11. shadow (도형에 그림자를 추가)
<v:shadow tyle="__________" on="true" color="____" color2="____" offset="____" offset2="____">
- type : single or double(두 개의 그림자)
- color2 : type이 'double' 일 경우 두 번째 그림자 색상
- offset : 도형과 그림자의 x, y 거리
- offset : type이 'double' 일 경우 두 번째 그림자와 도형의 x,y의 거리
12. textbox (도형 내부에 텍스트 입력)
<v:textbox stype="_____">-내용-</v:textbox>
13. extrusion (도형을 입체적으로 표현)
<v:extrusion backdepth="__" type="_____" on="true">
- type : parallel(원근감 없는 모양) / perspective(원근감이 있는 모양)
- backdepth : 돌출 부분의 깊이(기본 단위 : pt, 기본값 : 36pt)
- specularity : 반사광의 정도(0~1)
- rotationangle : x, y 축 기준의 회전각도
- on : true(지정하지 않거나 false로 지정하면 입체 표현 안됨) |
